<template>
  <transition name="slide-fade">
    <div v-if="visible" class="file-upload">
      <div class="file-upload__header">
        <span class="title">上传</span>
        <div class="r-btn">
          <a-button :icon="unfoldIcon" @click="unfoldClick" />
          <a-button icon="close" @click="close" />
        </div>
      </div>
      <div v-show="isUnfold" class="file-upload__body">
        <div class="wk-upload-cell" v-for="file in uploadList" :key="file.uid">
          <img :src="getFileTypeIcon(file)" class="wk-upload-cell__header" />
          <div class="wk-upload-cell__body">
            <div class="text-one-line">
              {{ file.name }}<span style="color: #999;margin-left:15px">{{ '(' + fileSize(file.size) + ')' }}</span>
            </div>
            <a-progress :percent="file.percent" />
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  // 文件上传
  name: 'FileUpload',
  components: {
    // WkUploadCell
  },
  props: {},
  data() {
    return {
      visible: false,
      isUnfold: true,
      uploadList: [],
    }
  },
  computed: {
    unfoldIcon() {
      return this.isUnfold ? 'minus' : 'plus'
    },
  },
  watch: {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    getFileTypeWithExt(ext) {
      if (ext) {
        ext = ext.toLowerCase()
        if (['jpg', 'png', 'jpeg', 'bmp', 'ico', 'gif'].includes(ext)) {
          return 'image'
        } else if (ext === 'psd') {
          return 'psd'
        } else if (ext === 'tif') {
          return 'tif'
        } else if (['mp4', 'm2v', 'mkv', 'rmvb', 'wmv', 'avi', 'flv', 'mov', '3gp'].includes(ext)) {
          return 'video'
        } else if (['mp3', 'wma', 'wav'].includes(ext)) {
          return 'audio'
        } else if (['xlsx', 'xls'].includes(ext)) {
          return 'excel'
        } else if (['doc', 'docx'].includes(ext)) {
          return 'word'
        } else if (['rar', 'zip', '7z', 'tar', 'iso', 'dmg'].includes(ext)) {
          return 'archive'
        } else if (ext === 'pdf') {
          return 'pdf'
        } else if (['ppt', 'pptx'].includes(ext)) {
          return 'ppt'
        } else if (['txt', 'text'].includes(ext)) {
          return 'text'
        }
      }
      return ''
    },
    fileSize(value) {
      if (typeof value == 'string') {
        return value
      }
      if (value == null || value == '') {
        return '0 Bytes'
      }
      var unitArr = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
      var index = 0
      var srcsize = parseFloat(value)
      index = Math.floor(Math.log(srcsize) / Math.log(1024))
      var size = srcsize / Math.pow(1024, index)
      //  保留的小数位数
      size = size.toFixed(2)
      return size + unitArr[index]
    },
    getFileIconWithSuffix(ext) {
      const fileType = this.getFileTypeWithExt(ext)
      if (fileType) {
        return {
          image: require('@/assets/img/file/file_img.png'),
          tif: require('@/assets/img/file/file_tif.png'),
          video: require('@/assets/img/file/file_video.png'),
          audio: require('@/assets/img/file/file_music.png'),
          excel: require('@/assets/img/file/file_excle.png'),
          word: require('@/assets/img/file/file_word.png'),
          archive: require('@/assets/img/file/file_zip.png'),
          pdf: require('@/assets/img/file/file_pdf.png'),
          ppt: require('@/assets/img/file/file_ppt.png'),
          text: require('@/assets/img/file/file_txt.png'),
        }[fileType]
      }

      return require('@/assets/img/file/file_unknown.png')
    },
    getFileTypeIcon(file) {
      if (file.type.indexOf('image') !== -1) {
        return this.getFileIconWithSuffix('png')
      } else if (file.type.indexOf('audio') !== -1) {
        return this.getFileIconWithSuffix('mp3')
      } else if (file.type.indexOf('video') !== -1) {
        return this.getFileIconWithSuffix('mp4')
      } else {
        const index = file.name.lastIndexOf('.')
        const ext = file.name.substr(index + 1) || ''

        return this.getFileIconWithSuffix(ext)
      }
    },

    upload(info, e) {
      this.visible = true
      this.uploadList.push(info.file)
      this.unique(this.uploadList, 'uid')
      console.log('22222', this.uploadList)
    },
    close() {
      this.uploadList = []
      this.visible = false
    },
    unfoldClick() {
      this.isUnfold = !this.isUnfold
    },
    // 去重
    unique(arr, key) {
      for (var i = 0; i < arr.length; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i][key] == arr[j][key]) {
            //第一个等同于第二个，splice方法删除第二个
            arr.splice(i, 1)
            j--
          }
        }
      }
    },
  },
}
</script>

<style lang="less" scoped>
.slide-fade-enter-active,
.slide-fade-leave-active {
  will-change: transform;
  transition: all 0.35s ease;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(100%);
}

.file-upload {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 400px;
  background-color: white;
  z-index: 1000000;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #ebeef5;
  font-size: 14px;

  &__header {
    padding: 5px 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 40px;
    line-height: 30px;
    .title {
      display: inline-block;
      font-weight: bold;
    }
    .r-btn {
      float: right;
    }
    /deep/ .ant-btn-icon-only {
      border: none;
      width: 32px;
      height: 32px;
      padding: 0;
      font-size: 16px;
      border-radius: 4px;
      box-shadow: none;
    }
  }

  &__body {
    height: 350px;
    overflow-y: auto;
    padding: 10px;

    .wk-upload-cell + .wk-upload-cell {
      margin-top: 10px;
    }
  }
}

.wk-upload-cell {
  border-radius: 4px;
  background-color: #f0f0f0;
  padding: 8px 15px;
  font-size: 12px;
  display: flex;

  &__header {
    width: 17px;
    height: 20px;
    margin-right: 15px;
    transform: translateY(50%);
  }

  &__body {
    flex: 1;
    width: 0;
    .el-progress {
      margin-top: 8px;
    }
  }

  &__footer {
    flex-shrink: 0;
    margin-left: 10px;
  }
}
</style>
